<template>
	
		<div class="animate-positiona">
			<div class="carEditorSubmit">
				<button type="submit" form="formAdd" class="submits" @click="addFn"><i class="ion-ios-plus-outline" style="color: #fff;font-size: 22px;"></i></button>				
			</div>
			<div class="page has-navbar has-tabbar" v-nav="{title: '通讯录', showBackButton: true}">
				<div class="page-content padding-top" style="margin-bottom: 0">
					<div class="customer-mail-table">
						<table>
							<tr>
								<th>姓名</th>
								<th>电话</th>
								<th>操作</th>
							</tr>
							<tr v-for="item in res"> 
								<td>{{item.customerName}}</td>
								<td>{{item.customerPhone}}</td>
								<td>
									<div class="operation">
										<span @click="editFn(item)"><i class="ion-compose"></i>编辑</span>
										<span @click="deleteFn(item)"><i class="ion-ios-close-outline"></i>删除</span>
									</div>
								</td>
							</tr>
							
						</table>
					</div>
				</div>
			</div>
			<transition name="bottom">
				<add v-if="addEditShow" @onsubmit = "onsubmit" :params="params"></add>
			</transition>
		</div>
		
	
</template>

<script>
	import customerMailAdd from './customer_mail_add'
	export default{
		data(){
			return{
				addEditShow:false,
				params:{},
				res:[],
			}
		},
		components:{
			"add":customerMailAdd
		},
		created(){
			this.getData()
		},
		methods:{
			getData(){
				axios.get(baseUrl+'/crm-web/controller/resForApp/phoneRecordList',{params:{recordState:1,userId:sess.get('userSession').userId}}).then(res=>{
					if(res)
						this.res = res.data.result
				})	
			},
			addFn(){
				this.params = {}
				this.addEditShow = true
			},
			editFn(obj){
				this.params = obj
				this.addEditShow = true
			},
			deleteFn(obj){
				$dialog.confirm({
					title:'提示',
					content:'是否删除('+obj.customerName+')',
					cancelText:'取消',
					okText:'确认删除',
				}).then(res=>{
					if(res){
						axios.get(baseUrl+ '/crm-web/controller/resForApp/deletePhoneRecord',{params:{phoneRecordId:obj.phoneRecordId}}).then(res=>{
							if(res){
								setTimeout(()=>{
									$toast.show('删除成功')
									this.getData()
								},400)
							}
						})
					}
					return 
				})
				
			},
			onsubmit(val){
				this.addEditShow = false
				if(val){
					this.getData()
				}
			}
			
		}
	}
</script>

<style scoped="scoped">
	.customer-mail-table{}
	.customer-mail-table table{ width: 100%;}
	.customer-mail-table tr{}
	.customer-mail-table td{ background: #fff; text-align: center; height: 50px; line-height: 50px; font-size: 12px; border-bottom:1px solid #ddd ; width: 33.33%;}
	.customer-mail-table th{ height: 50px; line-height: 50px;}
	.customer-mail-table .operation{}
	.customer-mail-table .operation span{color: #FF6816; font-size: 12px;}
	.customer-mail-table .operation span i{ font-size: 14px;}
</style>